<template>
  <div class="hello">
    <div>
      <h1 v-show="getList.length != 0">购物车</h1>
      <div v-for="(v, index) in getList" :key="index" class="d1">
        <van-card
          :num="v.count"
          :price="v.price + '.00'"
          :desc="v.phone"
          :title="v.name"
          :thumb="v.avaUrl"
        >
          <template #footer>
            <button @click="sub(v)" class="btn">-</button>
            <input type="text" v-model="v.count" @change="change(v)" class="input" />
            <button @click="add(v)" class="btn">+</button>
            <!-- <van-button size="mini" @click="sub(v)">-</van-button>
            <input type="text" v-model="v.count" @change="change(v)" class="input" />
            <van-button size="mini" @click="add(v)">+</van-button> -->
          </template>
        </van-card>
      </div>
      <div v-show="getList.length == 0">
        <van-empty description="购物车空空如也" />
      </div>
      <div v-show="getList.length != 0">
        <h2>共有{{ getAllCount }}件商品</h2>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  name: "Shopping",
  data() {
    return {};
  },
  methods: {
    sub(v) {
      if (v.count <= 1) {
        MessageBox.confirm("确认删除吗？")
          .then((action) => {
            this.$store.commit("sub", v);
          })
          .catch((e) => {});
      } else {
        this.$store.commit("sub", v);
      }
    },
    add(v) {
      this.$store.commit("add", v);
    },
    change(v) {
      if (v.count > 200) {
        v.count = 200;
        this.$store.commit("change", v);
      }
    },
  },
  computed: {
    getList() {
      return this.$store.state.list;
    },
    getAllCount() {
      return this.$store.getters.allCount;
    },
  },
};
</script>

<style scoped>
.input {
  width: 10%;
  text-align: center;
}
.hello {
  margin-top: 45px;
  text-align: center;
}
.btn {
  width: 5%;
}
</style>
